<template>
  <div class="scroll-wrapper">
    <main>
      <div class="title">
        {{ previewContent.title }}
      </div>
      <div class="wrap clearfix">
        <div class="autor">{{ previewContent.author }}</div>
      </div>
      <div v-html="previewContent.content" class="content">
      </div>
      <div id="comment" class="comment">
        <div class="title-wrap clearfix">
          <div class="comment-title" style="float: left;">
            评论
          </div>
        </div>
      </div>

    </main>
  </div>
</template>
<script>
export default {
  // props: { previewContent: {
  //   type: Object,
  //   default: function() {
  //     return {
  //       title: ''
  //     }
  //   }
  // }},
  props: ['previewContent'],
  created() {
    console.log('propcreated', this.previewContent)
  },
  updated() {
    console.log('propUpdated', this.previewContent)
  },
  mounted() {
    console.log('prop', this.previewContent)
  }
}

</script>
<style lang="scss" rel="stylesheet">
  .scroll-wrapper {
    img {
      width: 100%;
      height: auto;
    }
    a {
      color: #3668ff;
      text-decoration-line: underline;
    }
  }
</style>
<style rel="stylesheet" lang="scss" scoped>

li {
  list-style: none;
}

.scroll-wrapper {
  position: relative;
  width: 435px;
  height: 600px;
  margin-top: 140px;
  padding-right: 40px;
  padding-left: 10px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.clearfix:after {
  content: '';
  clear: both;
  display: block;
}

main {
  padding: 24px 17px 10px 17px;
}

main .title {
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 22px;
  font-family: MicrosoftYaHei;
  color: #333333;
  line-height: 32px;
}

main .wrap {
  margin-bottom: 32px;
}

main .wrap .autor {
  float: left;
  margin-right: 20px;
  font-size: 15px;
  font-family: MicrosoftYaHei;
  color: #999999;
  line-height: 20px;
}

main .wrap .company {
  float: left;
  margin-right: 20px;
  font-size: 15px;
  font-family: MicrosoftYaHei;
  color: #498fe2;
  line-height: 20px;
}

main .wrap .date {
  float: left;
  margin-right: 20px;
  font-size: 15px;
  font-family: MicrosoftYaHei;
  color: #999999;
  line-height: 20px;
}

main .content {
  margin-bottom: 44px;
  width: 100%;
  word-break: break-all;
}


main .content div,
main .content p {
  font-size: 15px;
  font-family: MicrosoftYaHei;
  color: #383838;
  line-height: 26px;
  letter-spacing: 1px;
  text-align: justify;
}

main .comment .title-wrap {
  margin-bottom: 26px;
}

main .comment .comment-title {
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #333333;
  line-height: 16px;
}

main .comment .item {
  margin-bottom: 25px;
}

main .comment .btn-all {
  margin-left: 36px;
  display: inline-block;
  font-size: 14px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  color: #498fe2;
  line-height: 20px;
}

main .avatar-wrap {
  float: left;
  font-size: 0;
  width: 26px;
  height: 26px;
  margin-right: 10px;
  border-radius: 13px 13px;
  overflow: hidden;
}

main .comments-content {
  float: left;
  width: 305px;
}

main .comments-content .message {
  font-size: 16px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #333333;
  line-height: 22px;
}

main .comments-content .nick-wrap {
  margin-bottom: 9px;
}

main .comments-content .nick {
  float: left;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #666666;
  line-height: 14px;
}

main .comments-content .number {
  float: right;
  font-size: 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #999999;
  line-height: 14px;
}

main .comments-content .like {
  width: 13.5px;
  height: 13.5px;
}

header {
  position: fixed;
  padding: 13px 16px;
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
  background-color: #EAF3FF;
}

header .btn-bottom {
  width: 77px;
  margin-top: 15px;
  font-size: 0;
  background: #418de8;
  border-radius: 2px;
  text-align: center;
}

header .btn-bottom a {
  font-size: 14px;
  height: 24px;
  line-height: 24px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #ffffff;
}

header .content {
  font-size: 14px;
  width: 202px;
  word-break: break-word;
  font-weight: 400;
  color: #418de8;
  line-height: 20px;
}

header .content:first-child {
  margin-top: 6px;
}

header .content-es {
  font-size: 14px;
  width: 202px;
  word-break: break-word;
  font-weight: 400;
  color: #418de8;
  line-height: 18px;
}

header .logo {
  margin-right: 11px;
  margin-top: 6px;
  margin-bottom: 6px;
  width: 42px;
  height: 42px;
}

footer {
  font-size: 0;
  padding: 15px 14px;
  background: #fcfcfc;
  border: 0.5px solid #e1e1e1;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

footer .btn-left {
  display: inline-block;
  font-size: 14px;
  width: 197px;
  padding: 6px 10px 6px 14px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #999999;
  line-height: 20px;
  margin-right: 40px;
  height: 32px;
  background: #f2f6f9;
  border-radius: 17px;
  border: 0.5px solid #c6cdd1;
  vertical-align: middle;
}

footer .btn-left .write-comment {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 10px;
}

footer .btn-center {
  margin-right: 41px;
}

footer .btn-center img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

footer .btn-right > img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
</style>
